import { Select, Table } from 'antd';
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { asyncPartbQuery } from '../../reducers/partbInfoReducer';
import { newOrderAdd } from '../../reducers/newOrderReducer';

const columns = [
    {
        title: '乙方姓名',
        dataIndex: 'partbname',
        key: 'partbname',
        align: 'center',
    },
    {
        title: '传真',
        dataIndex: 'fax',
        key: 'fax',
        align: 'center',
    }
]
export default function Partb() {
    let partbInfo = useSelector(store => store.partbInfo.partbList)
    let newOrder = useSelector(store => store.neworder.newOrder)
    let dispatch = useDispatch();
    useEffect(() => {
        if (!partbInfo.length) {
            dispatch(asyncPartbQuery())
        }
    })
    const handleChange = (value) => {
        let partbinfo = partbInfo.filter(item => item._id === value)[0]
        dispatch(newOrderAdd({
            partbinfo
        }))
    };
    return (
        <div style={{ textAlign: 'start' }}>
            <Select
                defaultValue={newOrder.partbinfo?.partbname ?? "选择乙方"}
                style={{ width: 300, margin: '15px 0' }}
                onChange={handleChange}
                options={partbInfo.map(item => ({
                    value: item._id,
                    label: item.partbname
                }))}
            />
            {newOrder.partbinfo && (
                <Table columns={columns} dataSource={[newOrder.partbinfo]} rowKey={(record) => record?._id} pagination={false} />
            )}
        </div>
    )
}
